*{
	margin: 0px;
	padding: 0px;
}
/* header头部相对定位 */
header{
	position: relative;
}
/* 后代元素选择器+类选择器 */
header .login{
	width: 150px;
	display: block;/* 设置为块级元素 */
	margin-left: 50px;
	margin-top: 20px;
}
header>p{
	position: absolute;
	top: -3px;
	right: 100px;
	font-size: 13px;
}
header>p>span:first-child{
	font-size: 12px;
	font-family: 宋体;
	color: lightgray;
}
header>p>a{
	font-size: 12px;
	font-family: 宋体;
	color: blue;
}
header>p>a{
	text-decoration: none;
}
header>p>span:last-child{
	font-size: 12px;
	font-family: "arial rounded mt bold";
	display: inline-block;
	border: 1px solid lightgray;
	width: 100px;
	height: 25px;
	text-align: center;
	line-height: 25px;
}
header>p>span:last-child>img{
	display: inline-block;
	vertical-align: middle;
}
/* 主体部分 */
main{
	position: relative;
}
main>img{
	display: block;
	margin-left: 12%;
	margin-top: 20px;
	}
	main>section{
		width: 300px;
		height: 370px;
		/* border: 1px solid black; */
		text-align: left;
		position: absolute;
		top: 20px;
		right: 200px;
		/* padding-left: 30px;
		padding-top: 10px; */
	}
	main>section>p:first-child>span{
		font-size: 13px;
		font-weight: bold;
	}
	main>section>p:first-child>a{
		display: inline-block;
		float: right;
		text-decoration: none;
		font-size: 13px;
	}
	main>section>form>p:first-child,main>section>form>p:nth-child(2){
		border: 1px solid lightgray;
		margin-top: 10px;
		height: 50px;
		line-height: 50px;
		vertical-align: middle;
		padding: 0;
	}
	input[type=text],input[type=password]{
		border: none;
		display: inline-block;
		position: relative;
		left: 30px;
	}
	input[type=text]:focus,input[type=password]:focus{
		outline: none;/* 去除边框线 */
	}
	main>section>form>p:first-child>label,
	main>section>form>p:nth-child(2)>label{
		display: inline-block;
		position: relative;
		left: 15px;
		top: 7px;
	}
	main>section>form>p:nth-child(3){
		margin-top: 10px;
	}
	main>section>form>p:nth-child(3)>span{
		color: gray;
		font-size: 13px;
		display: inline-block;
		position: relative;
		left: 10px;
		top: -2px;
	}
	main>section>form>p:nth-child(3)>a{
		color: gray;
		font-size: 13px;
		display: inline-block;
		float: right;
		text-decoration: none;
	}
	main>section>form>p:nth-child(3):after{
		display: block;
		content: "";
		clear: both;
	}
	input[type=submit]{
		width: 100%;
		height: 40px;
		display: block;
		margin-top: 10px;
		background-color: red;
		border: none;
		outline: none;
		font-size: 18px;
		color: white;
		font-weight: bold;
		cursor: pointer;/* 鼠标悬停变成小手形状 */
	}
	.friends,ul{
		margin-top: 10px;
		font-size: 13px;
		color: gray;
	}
	ul>li{
		list-style-type: none;
		float: left;
		margin-left: 12px;
		margin-top: 10px;
	}
	ul>li:nth-child(1){
		width: 30px;
		height: 30px;
		background: url(../img/qqf.png);
		background-size: 30px;
		cursor: pointer;
	}
	ul>li:nth-child(2){
		width: 30px;
		height: 30px;
		background: url(../img/wbf.png);
		background-size: 30px;
		cursor: pointer;
	}
	ul>li:nth-child(3){
		width: 30px;
		height: 30px;
		background: url(../img/zhif.png);
		background-size: 30px;
		cursor: pointer;
	}
	ul>li:nth-child(4){
		width: 30px;
		height: 30px;
		background: url(../img/wxf.png);
		background-size: 30px;
		cursor: pointer;
	}
	ul>li:nth-child(1):hover{
		width: 30px;
		height: 30px;
		background: url(../img/qqt.png);
		background-size: 30px;
	}
	ul>li:nth-child(2):hover{
		width: 30px;
		height: 30px;
		background: url(../img/wbt.png);
		background-size: 30px;
	}
	ul>li:nth-child(3):hover{
		width: 30px;
		height: 30px;
		background: url(../img/zhit.png);
		background-size: 30px;
	}
	ul>li:nth-child(4):hover{
		width: 30px;
		height: 30px;
		background: url(../img/wxt.png);
		background-size: 30px;
	}
	ul>li:last-child{
		position: relative;
		top: 5px;
		right: -22px;
	}
	ul>li:last-child>img{
		width: 20px;
		position: relative;
		top: 4px;
	}
	/* 清除浮动负面影响 */
	ul:after{
		display: block;
		content: "";
		clear: both;
	}
	/* 底部设置 */
	footer{
		margin: 80px auto;
		text-align: center;
	}
	footer>p{
		margin-top: 15px;
		font-size: 13px;
		color: gray;
	}
	footer>p>a{
		font-size: 13px;
		color: gray;
		text-decoration: none;
	}
	footer>p>a:hover{
		color: red;
	}